// @flow
import React, { Component } from 'react';
import { Layout, Icon, Menu, Breadcrumb } from 'antd';
import './LayoutMain.scss';

const { Header, Content, Footer, Sider } = Layout;
type Props = { LeftHeader: Node, UserHeader: Node, content: Node };
class LayoutMain extends Component<Props> {
  render() {
    const { LeftHeader, UserHeader, content } = this.props;
    const { pathname } = window.location;
    return (
      <Layout>
        <Header
          style={{
            background: '#fff',
            padding: 0,
            display: 'flex',
            justifyContent: 'space-between',
          }}
        >
          {LeftHeader}
          {UserHeader}
        </Header>
        <Breadcrumb separator=">" style={{ marginLeft: '16px', marginTop: '10px', marginBottom: '16px' }}>
          {pathname.split('/').map((item, key) => {
            return <Breadcrumb.Item key={`bread${item}`}>{item}</Breadcrumb.Item>;
          })}
          {/* <Breadcrumb.Item>Home</Breadcrumb.Item>
          <Breadcrumb.Item href="">Application Center</Breadcrumb.Item>
          <Breadcrumb.Item href="">Application List</Breadcrumb.Item>
          <Breadcrumb.Item>An Application</Breadcrumb.Item> */}
        </Breadcrumb>
        <Content style={{ marginLeft: '16px', marginRight: '16px', marginTop: '10px', marginBottom: '26px', padding: 24, background: '#fff', minHeight: 280 }}>
          {content}
        </Content>
      </Layout>
    );
  }
}

export default LayoutMain;
